import Component from '@ember/component';
import $ from 'jquery';

export default Component.extend({
  init() {
    this._super(...arguments);
    this.set('errors', []);
  },

  didUpdateAttrs() {
    this._super(...arguments);
    this.set('errors', []);
  },

  actions: {
    required(event) {
      if (!event.target.value) {
        this.errors.pushObject({ message: `${event.target.name} is required`});
      }
    }
  },
  didReceiveAttrs() {
    this._super(...arguments);
    const profile = this.data;
    if (typeof profile === 'string') {
      this.set('profile', JSON.parse(profile));
    } else {
      this.set('profile', profile);
    }
  },
  didInsertElement() {
    this._super(...arguments);
    this.$().attr('contenteditable', true);
    this.$('div p button').addClass('enabled');
    this.$('input.date').myDatePickerLib();
    this.$().on('animationend', () => {
        $(this).removeClass('sliding-anim');
      });
  },
  willDestroyElement() {
    this.$().off('animationend');
    this.$('input.date').myDatepickerLib().destroy();
    this._super(...arguments);
  }
});